<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/layui/css/layui.css" />
	<script src="css/layui/layui.all.js"></script>
	<script src="js/basejs/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	<!-- <link rel="stylesheet" type="text/css" href="css/layui/css/index.css" /> -->
</head>

<body>
	<div id="app">

		<header>
			<div class="layui-btn-container">

				<el-button size="mini" icon="el-icon-plus" type="primary" @click=add()>添加</el-button>

				<!-- <el-button size="mini" icon="el-icon-edit" type="primary" @click=update()>编辑</el-button> -->
				<!-- <el-button icon="el-icon-delete" type="danger">删除</el-button> -->

				<el-button size="mini" icon="el-icon-delete" type="danger" @click="batchDetele(tableChecled)">删除</el-button>
				<!-- <el-button size="mini" @click="deleteAll(sels)"> 批量删除</el-button> -->

			</div>

		</header>
		<div>

			<el-table :data="list" border :header-cell-style="{background:'#f2f2f2'}"
				style="width: 100%;margin-top: 20px" max-height="500" >
				<el-table-column type="selection" align="center" width="55">
				</el-table-column>
				<el-table-column align="center" label="id" width="55"> 
					<template slot-scope="scope">
						{{scope.row.id}}
					</template>
				</el-table-column>
				<el-table-column label="设备id" align="center">
					<template slot-scope="scope">
						{{ scope.row.equipId }}
					</template>
				</el-table-column>
				<el-table-column label="appkey" align="center">
					<template slot-scope="scope">
						<!-- <el-popover placement="right" title="" trigger="hover">
							<img :src="scope.row.avatar" class="img" />
							<img slot="reference" :src="scope.row.avatar" :alt="scope.row.avatar"
								style="max-height: 50px;max-width: 130px">
						</el-popover> -->
						{{ scope.row.appkey}}
					</template>
				</el-table-column>
				<el-table-column label="secret" align="center">
					<template slot-scope="scope">
						{{ scope.row.secret}}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button size="mini" icon="el-icon-edit" type="primary" @click=update(scope.row.userId)>删除</el-button>	
					</template>
				</el-table-column>
			</el-table>
			<!--弹窗用户列表-->
			<el-dialog title="用户列表" :visible.sync="dialogUserList">
				<el-table :data="userList" :header-cell-style="{background:'#f2f2f2'}" border tooltip-effect="dark"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" align="center" width="55">
					</el-table-column>
					<el-table-column property="date" label="id" width="150">
						<template slot-scope="scope">
							{{scope.row.userId}}
						</template>
					</el-table-column>
					<el-table-column property="name" label="用户名称" width="200">
						<template slot-scope="scope">
							{{ scope.row.loginName }}
						</template>
					</el-table-column>
					<el-table-column property="address" label="创建时间">
						<template slot-scope="scope">
							{{ scope.row.createTime}}
						</template>
					</el-table-column>
				</el-table>
				<div class="dialogBtn">
					<el-button type="primary" @click="preservation">保存</el-button>
				</div>
			</el-dialog>
			<!--分页-->
			<el-pagination class="page" :total='total' :page-size="10" layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</div>
	</div>
</body>
<script src="js/SecretList.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	#top {
		/* display: flex; */
		max-height: 18.75rem;
		/* width: 18.75rem; */
	}

	.dialogBtn {
		margin-top: 20px;
		text-align: center;
	}

	.page {
		margin-top: 10px;
	}
</style>

</html>